<template>
  <el-form
    :model="tableData"
    :show-message="false"
    class="contractEmpowerForm">
    <el-button
      type="text"
      icon="el-icon-plus"
      @click="addRol">批量添加
    </el-button>
    <el-table
      :data="tableData.dataList"
      style="width: 100%;"
      height="350px">
      <el-table-column
        type="index"
        label="序号"
        width="80"/>
      <el-table-column
        label="省份"
        width="240">
        <template slot-scope="scope">
          <el-form-item
            :prop="'.dataList[' + scope.$index + '].Province'"
            :rules="rules.city">
            <el-select
              v-model="tableData.dataList[scope.$index].Province"
              placeholder="请选择省份">
              <el-option
                v-for="(item,index) in city"
                :key="item.name+index"
                :label="item.name"
                :value="item.name"
                @click.native="changeOption(scope.$index,index)"/>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="城市"
        width="240">
        <template slot-scope="scope">
          <el-form-item
            :prop="'.dataList[' + scope.$index + '].city'"
            :rules="rules.city">
            <el-select
              v-model="tableData.dataList[scope.$index].city"
              placeholder="请选择城市">
              <el-option
                v-for="(item,index) in tableData.dataList[scope.$index].cities"
                :key="item.name+index"
                :label="item.name"
                :value="item.name"/>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="医院名称"
        width="240">
        <template slot-scope="scope">
          <el-form-item
            :prop="'.dataList[' + scope.$index + '].hospitalName'"
            :rules="rules.hospitalName">
            <el-input
              v-model="tableData.dataList[scope.$index].hospitalName"
              placeholder="请输入医院名称"/>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text text-danger"
            @click="deleteRol(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import city from '../../../static/city-code'

export default {
  name: 'AreaTab',
  data () {
    return {
      tableData: {
        dataList: [{
          Province: '',
          city: '',
          hospitalName: '',
          cities: []
        }]
      },
      options: [city],
      city: city,
      rules: {
        hospitalName: [
          { required: true, message: '请输入医院名称', trigger: 'blur' }
        ],
        Province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
  },
  methods: {
    changeOption (index, value) {
      this.tableData.dataList[index].city = ''
      this.tableData.dataList[index].cities = city[value].cities
    },
    addRol () {
      this.tableData.dataList.push({
        Province: '',
        city: '',
        hospitalName: '',
        cities: []
      })
    },
    deleteRol (index) {
      this.tableData.dataList.splice(index, 1)
    }
  }
}
</script>

<style lang="less">
  .contractEmpowerForm {
    .el-table__body {
      td {
        .cell {
          padding: 0;

          .el-form-item {
            margin: 0;
          }
        }
      }
    }
  }
</style>
